<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Memotest Game</title>
<link rel="stylesheet" href="css/jquery.mobile.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script type="text/javascript">
	// declaracion de clases
	var Juego = function() {
		this.showCounter = 0; //MAX 2
		this.selecteds = new Array();
		this.wins = 0; //MAX 8
		this.secs = 0; //MAX 
		this.fails = 0; //No max
	}

	Juego.prototype.nextSecond = function() {
		if (juego.wins == 8) {
			return;
		}
		this.secs += 1;
		$("#secs").html(this.secs);
	}

	Juego.prototype.getScore = function() {
		return Math.abs(Math.round(100000 * (10 / this.secs)
				- (0.2 * this.fails)));
	}

	var Sprite = function(elementId, sprite) {
		this.elementId = elementId;
		this.sprite = sprite;
		this.show = false;
	}

	Sprite.prototype.html = function() {
		var style = "background-image: url('" + this.sprite + "');"
		return '<div id="' + this.elementId + '" style="' + style + '" class="imageCard showimage"></div>';
	}

	Sprite.prototype.getSprite = function() {
		return this.sprite;
	}

	Sprite.prototype.getId = function() {
		return this.elementId;
	}

	Sprite.prototype.equals = function(other) {
		return this.getId() != other.getId()
				&& this.getSprite() == other.getSprite();
	}

	Sprite.prototype.showImage = function() {
		if (this.show)
			return;
		this.show = true;
		var element = $('#' + this.elementId);
		element.removeClass("hiddeimage");
		element.addClass("showimage");
	}

	Sprite.prototype.hideImage = function() {
		if (!this.show)
			return;
		this.show = false;
		var element = $('#' + this.elementId);
		element.removeClass("showimage");
		element.addClass("hiddeimage");
	}

	Sprite.prototype.disable = function() {
		var element = $('#' + this.elementId);
		element.css("background-image", "none");// TODO quitar tambien la sombra
		element.removeClass("showimage");
		element.removeClass("hiddeimage");
		element.unbind("tap taphold swipe vclick");
	}

	function analizeResults() {
// 		console.log("Analizando resultado");
		if (juego.showCounter == 2) {
// 			console.log("Apreto el segundo ", juego.selecteds[1].getSprite());
// 			console.log("is equals", juego.selecteds[1]
// 					.equals(juego.selecteds[0]));
			if (juego.selecteds[1].equals(juego.selecteds[0])) {
				juego.wins += 1;
				for (i = 0; i < 2; i++) {
					juego.selecteds[i].disable();
					juego.selecteds[i] = null;
				}
				if (juego.wins == 8) {
					dialogWin()
				}
			} else {
				juego.fails += 1;
				for (i = 0; i < 2; i++) {
					juego.selecteds[i].hideImage();
					juego.selecteds[i] = null;
				}
			}
			juego.showCounter = 0;
		} else {
// 			console.log("Apreto el primero ", juego.selecteds[0].getSprite());
		}
	}

	var images = [ "img/sprite_rhino_1.png", "img/sprite_rhino_2.png",
			"img/sprite_rhino_3.png", "img/sprite_rhino_4.png",
			"img/sprite_rhino_5.png", "img/sprite_rhino_6.png",
			"img/sprite_rhino_7.png", "img/sprite_rhino_8.png",
			"img/sprite_rhino_1.png", "img/sprite_rhino_2.png",
			"img/sprite_rhino_3.png", "img/sprite_rhino_4.png",
			"img/sprite_rhino_5.png", "img/sprite_rhino_6.png",
			"img/sprite_rhino_7.png", "img/sprite_rhino_8.png" ];

	var spriteArray = new Array();
	var juego = new Juego();

	function startGame() {
		$(".imageCard").removeClass("showimage");
		$(".imageCard").addClass("hiddeimage");
		$(".imageCard").bind(
				"tap taphold swipe vclick",
				function() {
					var idx = $(this).data("idx");

					if (juego.selecteds.indexOf(spriteArray[idx]) != -1
							|| juego.showCounter + 1 > 2)
						return;
					juego.showCounter += 1;

					juego.selecteds[juego.showCounter - 1] = spriteArray[idx];
					spriteArray[idx].showImage();
					setTimeout("analizeResults()", 1000);
				});
		setInterval('juego.nextSecond()', 1000);
	}

	function dialogWin() {
		try {
			blackberry.ui.dialog.standardAskAsync(
					'Perfect, you did it!\nScore: ' + juego.getScore(),
					blackberry.ui.dialog.D_OK, function() {
						window.location.reload();
					}, {
						title : "Congratulations",
						size : blackberry.ui.dialog.SIZE_SMALL,
						position : blackberry.ui.dialog.CENTER
					});
		} catch (e) {
		}
	}

	$(document).ready(function() {
		$.mobile.ajaxLinksEnabled = false;
		for (i = 0; i < 16; i++) {
			do {
				index = Math.floor(Math.random() * 16);
			} while (spriteArray[index] != undefined);
			spriteArray[index] = new Sprite("s_" + i, images[i]);
		}
		var container = $("#card1");
		for (i = 0; i < 16; i++) {
			var element = $(spriteArray[i].html());
			element.data("idx", i);
			container.append(element);
			container = container.next();
		}
		document.getElementById('audio').play();
		setTimeout("startGame()", 3000);

	});
</script>
<style type="text/css">
.imageCard {
	margin: 5px auto 5px auto;
	width: 110px;
	height: 100px;
	background-repeat: no-repeat;
	width: 100px;
	-webkit-transition-property: -webkit-transform, background-position;
	-webkit-transition-duration: 2s, 0.3s;
	-webkit-transition-delay: 0s, 0.5s;
	background-position: 0px 0px;
}

.showimage {
	-webkit-transform: rotateY(180deg);
	background-position: -100px 0px;
	-webkit-box-shadow: 0 8px 6px -6px black !important;
}

.hiddeimage {
	-webkit-transform: rotateY(0deg);
	background-position: 0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px black !important;
}

.gridpanel {
	margin: 0 auto 0 auto;
	width: 425px;
	padding: 5px;
	background-color: #aef;
	-webkit-box-shadow: inset 0 0 10px #000000 !important;
}
</style>
</head>

<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h6>
				<img src="img/titulo.png">
				<audio id="audio" src="img/bg.mp3" preload="auto" loop="loop"></audio>
			</h6>
		</div>
		<div data-role="content">
			<div id="boxcard" class="ui-grid-c ui-corner-all gridpanel">
				<div id="card1" class="ui-block-a"></div>
				<div id="card2" class="ui-block-b"></div>
				<div id="card3" class="ui-block-c"></div>
				<div id="card4" class="ui-block-d"></div>
				<div id="card5" class="ui-block-a"></div>
				<div id="card6" class="ui-block-b"></div>
				<div id="card7" class="ui-block-c"></div>
				<div id="card8" class="ui-block-d"></div>
				<div id="card9" class="ui-block-a"></div>
				<div id="card10" class="ui-block-b"></div>
				<div id="card11" class="ui-block-c"></div>
				<div id="card12" class="ui-block-d"></div>
				<div id="card13" class="ui-block-a"></div>
				<div id="card14" class="ui-block-b"></div>
				<div id="card15" class="ui-block-c"></div>
				<div id="card16" class="ui-block-d"></div>
			</div>
		</div>
		<div data-role="footer">
			<div class="ui-grid-b">
				<div class="ui-block-a">&nbsp;</div>
				<div class="ui-block-b" style="text-align: center;" id="secs">0</div>
				<div class="ui-block-c" style="font-size: 8px; text-align: right;">by
					Chunchunito</div>
			</div>
		</div>
	</div>
	
</body>
<!-- <script type="text/javascript"> -->
//     var mopub_ad_unit='eb256ac2473c11e2a5ab12313900d932';
//     var mopub_ad_width=320;
//     var mopub_ad_height=80;
<!-- </script> -->
<!-- <script src="http://ads.mopub.com/js/client/mopub.js"></script> -->
</html>